<template>
  <div class="app-container home" style="background-color: #F2F6FC">
    <div>
      <el-row :gutter="10">
        <el-col :sm="24" :lg="6">
          <el-card shadow="hover">
            <h2 style="text-align: center">云上健步走小程序数据一览</h2>
          </el-card>
        </el-col>
        <el-col :sm="24" :lg="6">
          <el-card shadow="hover">
            <h2 style="text-align: center">
              <el-tooltip class="item" effect="dark" content="小程序注册用户总数" placement="top">
                <span><i class="el-icon-user-solid" style="font-size: 30px;color: #52E6FF"> </i> {{ topData.useSum }} 人</span>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="路线图标点数量" placement="top">
              <span><i class="el-icon-map-location"
                       style="font-size: 30px;color: #52E6FF;margin-left: 10px"></i> {{ topData.siteSum }} 个</span>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="团组织、队伍数量" placement="top">
                <span> <i class="el-icon-school"
                          style="font-size: 30px;color: #52E6FF;margin-left: 10px"></i>{{ topData.teamSum }} 个</span>
              </el-tooltip>
            </h2>
          </el-card>
        </el-col>
        <el-col :sm="24" :lg="6">
          <el-card shadow="hover">
            <h2 style="text-align: center">
              <el-tooltip class="item" effect="dark" content="小程序用户今日总兑换里程数量" placement="top">
                <span><i class="el-icon-s-promotion"
                         style="font-size: 30px;color: #52E6FF"></i> 今日兑换：{{ topData.todayMileageSum }} 里 </span>
              </el-tooltip>
            </h2>
          </el-card>
        </el-col>
        <el-col :sm="24" :lg="6">
          <el-card shadow="hover">
            <h2 style="text-align: center">
              <el-tooltip class="item" effect="dark" content="小程序用户总兑换里程数量" placement="top">
                <span><i class="el-icon-s-flag" style="font-size: 30px;color: #52E6FF"></i> 总兑换：{{ topData.mileageSum }} 里 </span>
              </el-tooltip>
            </h2>
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="10" style="margin-top: 10px">
        <el-col :sm="24" :lg="12">
          <el-card shadow="hover">
            <div id="teamInfo" :style="{width: '100%', height: '300px'}"></div>
          </el-card>
        </el-col>
        <el-col :sm="24" :lg="12">
          <el-card shadow="hover">
            <div id="walkRow" :style="{width: '100%', height: '300px'}"></div>
          </el-card>
        </el-col>
      </el-row>


      <el-row :gutter="10" style="margin-top: 10px">
        <el-col :sm="24" :lg="12">
          <el-card shadow="hover">
            <div id="userInfo" :style="{width: '100%', height: '300px'}"></div>
          </el-card>
        </el-col>
        <el-col :sm="24" :lg="12">
          <el-card shadow="hover">
            <div id="siteInfo" :style="{width: '100%', height: '300px'}"></div>
          </el-card>
        </el-col>
      </el-row>
    </div>


  </div>
</template>


<script>

import {getIndexTopData, getTeamCharBar} from "@/api/applet/appletTeam";
import {getUserRankInfo} from "@/api/applet/weChatUser";
import {getWalkRowChar} from "@/api/applet/appletWalkRow";
import {getSiteInfoPie} from "@/api/applet/appletSite";


export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "3.8.2",
      topData: {
        useSum: 0,
        siteSum: 0,
        teamSum: 0,
        mileageSum: 0.00,
        todayMileageSum: 0.00
      }
    };
  },
  mounted() {
    this.getTopData()
    this.getTeamInfo()
    this.getUserInfoChar()
    this.getWalkChar()
    this.getSiteInfo()
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },

    //获取点位信息
    getSiteInfo() {
      let id = "siteInfo";
      let title = "点\n位\n信\n息\n到\n达\n人\n数\n详\n情";
      getSiteInfoPie().then(res => {
        let legendData = res.data.legendData
        let seriesData = res.data.seriesData;
        this.drawPie(id, title, legendData, seriesData)
      })
    },


    //获取顶部数据
    getTopData() {
      getIndexTopData().then(res => {
        this.topData = res.data
      })
    },

    //获取最近15天兑换详情
    getWalkChar() {
      let id = "walkRow";
      let title = "近15天兑换记录"
      let legendData = ["累计微信步数", "累计兑换步数", "累计兑换里程"]
      getWalkRowChar().then(res => {
        let xData = res.data.xData;
        let mileage = res.data.mileage; //兑换里程
        let covertSum = res.data.covertSum; //兑换步数
        let stepSum = res.data.stepSum; //微信步数
        for (let i = 0; i < mileage.length; i++) {
          mileage[i] = mileage[i] > 0 ? mileage[i] : null;
        }
        for (let i = 0; i < covertSum.length; i++) {
          covertSum[i] = covertSum[i] > 0 ? covertSum[i] : null;
        }
        for (let i = 0; i < stepSum.length; i++) {
          stepSum[i] = stepSum[i] > 0 ? stepSum[i] : null;
        }
        let series = [
          {
            name: '累计微信步数',
            type: 'line',
            emphasis: {
              focus: 'series'
            },
            showBackground: true,
            data: stepSum,
            connectNulls: true
          },
          {
            name: '累计兑换步数',
            type: 'line',
            barGap: 0,
            emphasis: {
              focus: 'series'
            },
            showBackground: true,
            data: covertSum,
            connectNulls: true
          },
          {
            name: '累计兑换里程',
            type: 'line',
            emphasis: {
              focus: 'series'
            },
            showBackground: true,
            data: mileage,
            connectNulls: true
          },
        ]
        this.drawLine(id, xData, series, title, legendData)
      })


    },

    //获取个人里程排行榜
    getUserInfoChar() {
      let id = "userInfo";
      let title = "个人里程排行榜（前十）"
      let legendData = ["累计里程", "累计天数", '排名']
      getUserRankInfo().then(res => {
        let xData = res.data.xData;
        let mileageSum = res.data.mileageSum;
        let daySum = res.data.daySum;
        let rankList = [];
        for (let i = 0; i < xData.length; i++) {
          rankList.push(i + 1);
        }
        for (let i = 0; i < mileageSum.length; i++) {
          mileageSum[i] = mileageSum[i] > 0 ? mileageSum[i] : null;
        }
        for (let i = 0; i < daySum.length; i++) {
          daySum[i] = daySum[i] > 0 ? daySum[i] : null;
        }
        let series = [
          {
            name: '累计里程',
            type: 'bar',
            barGap: 0,
            emphasis: {
              focus: 'series'
            },
            yAxisIndex: 0,
            showBackground: true,
            data: mileageSum,

          },
          {
            name: '累计天数',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            yAxisIndex: 0,
            showBackground: true,
            data: daySum,
          },
          {
            name: '排名',
            type: 'line',
            emphasis: {
              focus: 'series'
            },
            yAxisIndex: 1,
            showBackground: true,
            data: rankList,
            itemStyle: {
              normal: {
                label: {
                  formatter: "第 {c} 名",
                  show: true,//是否展示
                  textStyle: {
                    fontWeight: 'bolder',
                    fontSize: '12',
                    fontFamily: '微软雅黑',
                  }
                }
              }
            },
          },
        ]
        this.drawLine(id, xData, series, title, legendData)
      })
    },

    //获取队伍里程排行榜
    getTeamInfo() {
      let id = "teamInfo";
      let title = "队伍里程排行榜（前十）"
      let legendData = ["累计里程", "队伍人数", "累计天数", '排名']
      getTeamCharBar().then(res => {
        let xData = res.data.xData;
        let walkSum = res.data.walkSum;
        let peopleSum = res.data.peopleSum;
        let daySum = res.data.daySum;
        let rankList = [];
        for (let i = 0; i < xData.length; i++) {
          rankList.push(i + 1);
        }
        for (let i = 0; i < walkSum.length; i++) {
          walkSum[i] = walkSum[i] > 0 ? walkSum[i] : null;
        }
        for (let i = 0; i < peopleSum.length; i++) {
          peopleSum[i] = peopleSum[i] > 0 ? peopleSum[i] : null;
        }
        for (let i = 0; i < daySum.length; i++) {
          daySum[i] = daySum[i] > 0 ? daySum[i] : null;
        }
        let series = [
          {
            name: '累计里程',
            type: 'bar',
            barGap: 0,
            emphasis: {
              focus: 'series'
            },
            yAxisIndex: 0,
            showBackground: true,
            data: walkSum,
          },
          {
            name: '队伍人数',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            yAxisIndex: 0,
            showBackground: true,
            data: peopleSum,
          },
          {
            name: '累计天数',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            yAxisIndex: 0,
            showBackground: true,
            data: daySum,
          },
          {
            name: '排名',
            type: 'line',
            emphasis: {
              focus: 'series'
            },
            yAxisIndex: 1,
            showBackground: true,
            data: rankList,
            itemStyle: {
              normal: {
                label: {
                  formatter: "第 {c} 名",
                  show: true,//是否展示
                  textStyle: {
                    fontWeight: 'bolder',
                    fontSize: '12',
                    fontFamily: '微软雅黑',
                  }
                }
              }
            },
          },
        ]
        this.drawLine(id, xData, series, title, legendData)
      })

    },

    //绘制柱状图
    drawLine(id, xData, series, title, legendData) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById(id))
      // 绘制图表配置
      let option = {
        animationDuration: 3000,
        title: {text: title, backgroundColor: 'transparent'},
        tooltip: {
          trigger: 'axis', axisPointer: {type: 'shadow'}, textStyle: {
            color: "#52E6FF"
          },
        },
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{offset: 0, color: '#00DCFB'}, {offset: 1, color: '#14566B'}]
          },
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{offset: 0, color: '#FF515A'}, {offset: 1, color: '#FFDD53'}]
          },
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{offset: 0, color: '#6574E2'}, {offset: 1, color: '#261164'}]
          }
        ],
        toolbox: {
          show: true, orient: 'vertical', left: 'right', top: 'center', feature: {
            mark: {show: true}, dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar', 'stack']},
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        legend: {data: legendData},

        xAxis: {
          axisLine: {
            onZero: false
          },
          data: xData, type: 'category', axisLabel: {
            interval: 0,
            formatter: function (value) {
              return value.length > 5 ? value.slice(0, 4) + "…" : value;
            }
          }
        },
        yAxis: [
          {
            type: 'log',
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            splitLine: {
              show: false     //去掉网格线
            },
            type: 'value',
            name: "排名",
            min: 11,
            max: 0,
            inverse: true,
            axisLabel: {
              formatter: '{value}'
            }

          }
        ],
        series: series,
      };
      // 窗口大小自适应方案
      myChart.setOption(option);
      setTimeout(function () {
        window.onresize = function () {
          myChart.resize();
        }
      }, 200)
    },


    //绘制冰图
    drawPie(id, title, legendData, seriesData) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById(id))
      // 绘制图表配置
      let option = {
        animationDuration: 2000,
        title: {text: title, backgroundColor: 'transparent', left: 'left'},
        tooltip: {
          trigger: 'item',
          textStyle: {
            color: "#52E6FF"
          },
          formatter: function (params) {
            let data = params.data;
            return data.name + '<br>解锁里程：' + data.mileage + ' 里<br>到达人数：' + data.value + ' 人';
          }

        },

        legend: {
          type: 'scroll',
          orient: 'vertical',
          left: 'right',
          data: legendData,
        },
        series: [
          {
            type: 'pie',
            center: ['40%', '50%'],
            data: seriesData,

            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]

      };
      // 窗口大小自适应方案
      myChart.setOption(option);
      setTimeout(function () {
        window.onresize = function () {
          myChart.resize();
        }
      }, 200)
    }


  },
};
</script>


<style scoped lang="scss">

.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  // background-image: url("../assets/images/login-background.jpg");
  // background-image: url("https://huangyuan1.oss-cn-beijing.aliyuncs.com/2022/05/08/581e047b724b7.jpg");
  background-image: url("../assets/images/596eccaebf622.jpg");
  background-size: cover;
}


.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>

